import React from 'react'
import Map from 'components/map'

export default {
  key: 'map',
  name: 'Map 地图',
  author: '张然',
  description: '地图组件化。',
  isExampleFull: false,
  api: [
    {
      title: 'API',
      data: [{
        param: 'location', description: '一个地点对象或者::JSON::字符串，内部如果含有::latitude::、::longitude::即可以定位至对应位置。', type: 'object|JSON', defaultValue: '-'
      }, {
        param: 'getMap', description: '得到地图实例。', type: 'function(map)', defaultValue: '() => {}'
      }],
      description: '注意：该地图如果是系统初次渲染，那么该页面只能同时初次渲染一个组件。因为内部启用了异步加载地图代码，多次初次渲染会导致多次下载可能会使得代码错误。当使用::Map.open::或::Map.Text::时没有影响。'
    },
    {
      title: 'Map.open',
      data: [{
        param: 'location', description: '同上。', type: 'object', defaultValue: '-'
      }],
      description: '打开一个地图弹窗。'
    },
    {
      title: 'Map.Text',
      data: [{
        param: 'location', description: '同上，如果不含有经纬度信息，则显示一条额外的信息。', type: 'object|JSON', defaultValue: '-'
      }],
      description: '一个通用的弹窗按钮。'
    },
    {
      title: 'Map.init',
      data: [],
      description: '初始化地图对象::AMap::到代码中，返回一个Promise对象。当你需要使用地图对象的时候先调用此函数初始化再进行使用。'
    }
  ],
  example: [
    {
      title: '基础用法',
      description: '显示一张地图。',
      state: {

      },
      getMethod: context => {
        return {

        }
      },
      getContent: context => {
        const { } = context.state;
        return (
          <div>
            <Map
              location={{
                latitude: "31.234619141",
                longitude: "121.373077393",
                address: "金环商务花园办公楼-正门"
              }}
              style={{ height: 300 }}
            />
          </div>
        )
      }
    },
    {
      title: 'API调用与Map.Text',
      description: '可通过::Map.open::打开一个地图，内置了一个含有默认样式的地图组件::Map.Text::。',
      state: {
        location: {
          latitude: "31.234619141",
          longitude: "121.373077393",
          address: "金环商务花园办公楼-正门"
        }
      },
      getMethod: context => {
        return {
          openMap: location => {
            Map.open(location)
          }
        }
      },
      getContent: context => {
        const { location } = context.state;
        return (
          <div>
            <a onClick={() => context.openMap(location)}>金环商务花园办公楼-正门</a>
            <br /><br />
            <Map.Text location={location}/>
            <br />
            <Map.Text location={{ address: '没有经纬度' }}/>
          </div>
        )
      }
    }
  ]
}
